<template>
  <div class="mainoe">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>添加退货单</span>
          </div>
          <div class="main_crumbs_r boxnr" style="margin-top: -5px"></div>
        </div>
        <el-form
          :inline="true"
          :model="monitorForm"
          :rules="rules"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <div class="mainor_form padding10 header_form">
            <div>
              <el-form-item label="用户名称">
                <change-user-input
                  ref="changeUserInput"
                  @sendValue="getUser"
                  @clear="clearUid"
                  :uid="this.uid"
                ></change-user-input>
              </el-form-item>
              <el-button
                type="primary"
                @click="goodsFormVisible = true"
                class="marginLeft5"
                :disabled="goodsFormBtnDisabled"
                >选择退货订单</el-button
              >
              <el-form-item
                label="退货原因"
                prop="form.return_remark"
                label-width="80px"
                :rules="rules.return_remark"
              >
                <el-select
                  v-model.trim="monitorForm.form.return_remark"
                  placeholder="退货原因"
                  class="wid140"
                >
                  <el-option label="菜品变质" value="菜品变质"></el-option>
                  <el-option label="菜品损坏" value="菜品损坏"></el-option>
                  <el-option label="菜品多送" value="菜品多送"></el-option>
                  <el-option label="菜品错送" value="菜品错送"></el-option>
                  <el-option label="其他原因" value="4"></el-option>
                </el-select>
                <span
                  v-show="
                    monitorForm.form.return_remark == '菜品变质' ||
                      monitorForm.form.return_remark == '菜品损坏'
                  "
                  style="color: red"
                  >退货数量自动填充报损数量</span
                >
              </el-form-item>

              <el-form-item
                v-if="monitorForm.form.return_remark == 4"
                label
                prop="user_return_remark"
                :rules="rules.user_return_remark"
              >
                <el-input
                  v-model.trim="monitorForm.user_return_remark"
                  placeholder="其他原因"
                  clearable
                  class="wid220 marginLeft5"
                ></el-input>
              </el-form-item>
            </div>
            <div class="right_box">
              <el-button @click="batchDelete">批量删除</el-button>
            </div>
          </div>
          <div class="mainoe_td boxdq marginLeft0 marginBottom10 marginTop10">
            <div class="mainoe_tdr">
              注意：1.菜品变质、损坏原因下，审核时退货数量自动填充报损数量；2.保存时系统会忽略已全退，退货数量为空或0的商品。
            </div>
            <div class="mainoe_tdl">
              <el-button @click="autoFillNum"
                >自动填充退货数量
                <el-tooltip class="item" effect="dark" placement="top">
                  <div slot="content">
                    注释：所有商品的退货数量自动填充为配送数量（未退数量）！
                  </div>
                  <svg
                    aria-hidden="true"
                    class="navbar_svg new_navbar_svg"
                    width="14"
                    height="14"
                  >
                    <use xlink:href="#icon-summary_question" />
                  </svg> </el-tooltip
              ></el-button>
            </div>
          </div>

          <div class="main_table marginTop0">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="monitorForm.return_data.info.order_list"
              element-loading-text="加载中"
              fit
              highlight-current-row
              :summary-method="getSummaries"
              @selection-change="handleSelectionChange"
              show-summary
            >
              <el-table-column type="selection" width="80" />
              <el-table-column label="序号" width="80">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                prop="name"
                min-width="180"
                class-name="main_hei"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span
                      v-if="scope.row.activity_type == 4"
                      :class="'active' + scope.row.activity_type"
                      >[{{ activity_type_list[scope.row.activity_type] }}]</span
                    >
                    {{ scope.row.name }}【{{ scope.row.spu_name }}】
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单位" prop="unit" class-name="main_hei" />
              <el-table-column
                label="配送数量"
                prop="sort_num"
                width="150"
                class-name="main_hei"
              />
              <el-table-column
                label="配送单价"
                prop="sort_price"
                width="150"
                class-name="main_hei"
              />
              <el-table-column
                label="已退数量"
                prop="return_num"
                class-name="main_hei"
              />
              <el-table-column
                label="退货数量"
                prop="sort_num"
                class-name="main_hei"
                width="180"
              >
                <template slot-scope="scope">
                  <el-form-item
                    label-width="10px"
                    label=" "
                    class="list_el-form_item"
                    :prop="
                      'return_data.info.order_list.' +
                        scope.$index +
                        '.apply_num'
                    "
                    :rules="rules.apply_num"
                  >
                    <el-input
                      v-model.trim="scope.row.apply_num"
                      placeholder="退货数量"
                      class="wid110"
                      @change="val => inputchnage(val, scope, 1)"
                      :disabled="scope.row.return_status >= 2 ? true : false"
                    ></el-input>
                    <!-- @change="numberChange($event, scope.$index)" -->
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="退货单价"
                prop="apply_price"
                width="180"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-form-item
                    label-width="10px"
                    label=" "
                    class="list_el-form_item"
                    :prop="
                      'return_data.info.order_list.' +
                        scope.$index +
                        '.apply_price'
                    "
                    :rules="rules.apply_price"
                  >
                    <el-input
                      v-model.trim="scope.row.apply_price"
                      placeholder="退货单价"
                      class="wid110"
                      :disabled="scope.row.return_status >= 2 ? true : false"
                      @change="val => inputchnage(val, scope, 2)"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="退货金额"
                width="180"
                class-name="main_hei"
                prop="apply_money"
              >
                <template slot-scope="scope">
                  <!-- {{
                    scope.row.apply_num && scope.row.apply_price
                      ? $toFixed(
                          parseFloat(
                            scope.row.apply_num * scope.row.apply_price
                          )
                        )
                      : parseFloat(0.0).toFixed(2)
                  }} -->
                  <el-form-item
                    label-width="10px"
                    label=" "
                    class="list_el-form_item"
                    :prop="
                      'return_data.info.order_list.' +
                        scope.$index +
                        '.apply_money'
                    "
                    :rules="rules.apply_money"
                  >
                    <el-input
                      v-model.trim="scope.row.apply_money"
                      placeholder="退货金额"
                      class="wid110"
                      @change="val => inputchnage(val, scope, 3)"
                      :disabled="scope.row.return_status >= 2 ? true : false"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                prop="remark"
                width="200"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-form-item
                    label-width="0"
                    label=""
                    class="list_el-form_item"
                    prop="remark"
                  >
                    <el-input
                      v-model.trim="scope.row.remark"
                      placeholder="备注"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label=" " align="left" fixed="right">
                <template slot-scope="scope">
                  <el-link type="danger" @click="scdelete(scope.$index)"
                    >删除</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        <div class="mainoe_up marginTop20" style="min-height: 200px">
          <div class="main_tile boxdq marginBottom10">
            <div class="main_tile_l marginLeft0">
              <em></em>上传凭证
              <span>仅支持jpg，jpeg，png格式，文件小于2M，最多添加5张</span>
            </div>
          </div>
          <div class="main_upImg marginLeft10">
            <el-upload
              :action="uploadPath"
              list-type="picture-card"
              :on-success="handSuccess"
              :on-remove="handleRemove"
              :limit="5"
              :file-list="filelist"
              :on-exceed="handleExceed"
              :before-upload="beforeAvatarUpload"
              multiple
            >
              <span slot="default">
                <svg
                  aria-hidden="true"
                  class="main_page_svg"
                  width="32"
                  height="27"
                >
                  <use xlink:href="#icon-commodit_camera" />
                </svg>
              </span>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img :src="dialogImageUrl" alt />
            </el-dialog>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="clearfix"></div>

        <div class="newConBox_p200 paddingBottom10" id="newConBox">
          <div class="newConBox_h32">
            <div
              :class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
            >
              <div class="mainor_prl">
                <el-button type="primary" @click="preservation(0)" v-repeatClick
                  >保存</el-button
                >
                <el-button @click="$router.back(-1)">取消</el-button>
              </div>
              <div class="mainor_prr">
                <span>合计金额：¥{{ total }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建退货单弹窗 -->
    <el-dialog
      title="选择退货订单"
      :visible.sync="goodsFormVisible"
      class="main_dialog dialog900"
    >
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form_sh"
          class="demo-form-inline"
          ref="userListFrom1"
          label-width="1px"
        >
          <el-form-item label=" " prop="order_sn">
            <el-input
              v-model.trim="form_sh.order_sn"
              placeholder="订单号"
              clearable
              class="wid180"
            ></el-input>
          </el-form-item>
          <el-form-item label="" class="marginLeft10">
            <el-date-picker
              v-model="createTime"
              type="daterange"
              class="time220"
              :editable="false"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
            <el-button
              type="primary"
              :loading="dialoglistLoading"
              @click="getUserOrder"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="main_table marginTop0" style="min-height: 360px">
        <el-table
          ref="multipleTable1"
          v-loading="dialoglistLoading"
          :data="user_order_list.data"
          element-loading-text="加载中"
          fit
          highlight-current-row
        >
          <el-table-column
            label="订单号"
            prop="order_sn"
            width="220"
            class-name="main_hei"
          >
            <template slot-scope="scope">
              <div class="mainoe_id">
                <p>{{ scope.row.order_sn }}</p>
                <span>{{ parseTime(scope.row.created_at) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="配送日期"
            prop="userNickname"
            width="180"
            class-name="main_hei"
          >
            <template slot-scope="scope">
              {{ parseTime(scope.row.send_time, "{y}-{m}-{d}") }}
            </template>
          </el-table-column>
          <el-table-column
            label="订单状态"
            prop="userNickname"
            width="100"
            class-name="main_hei"
          >
            <template slot-scope="scope"
              ><span :class="'order' + scope.row.order_status">
                {{ user_order_status[scope.row.order_status] }}
              </span></template
            >
          </el-table-column>
          <el-table-column
            label="支付状态"
            prop="userNickname"
            width="100"
            class-name="main_hei"
          >
            <template slot-scope="scope"
              ><span :class="'pay_type' + scope.row.pay_type">
                {{ user_pay_type[scope.row.pay_status] }}</span
              ></template
            >
          </el-table-column>
          <el-table-column
            label="已全退"
            prop="userNickname"
            width="100"
            class-name="main_hei"
          >
            <template slot-scope="scope">{{
              scope.row.return_status == 2 ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="main_hei">
            <template slot-scope="scope">
              <el-link
                :type="scope.row.return_status != 2 ? 'success' : 'info'"
                @click="check_return_order(scope)"
                >退货</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current_sh.page"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="limit_sh"
            layout="total, sizes, prev, pager, next, jumper"
            :total="user_order_list.total"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  get_order,
  check_return_order,
  submit_order
} from "@/api/order/orderReturn";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/orderExchange";
import ChangeUserInput from "@/components/ChangeUserInput";
import { parseTime } from "@/utils/index";
import { uploadPath } from "@/api/currency";

export default {
  components: {
    ChangeUserInput
  },
  data() {
    return {
      parseTime,
      uploadPath,
      // 监听滚动
      searchBarFixed: false,
      // 选择退货订单
      goodsFormVisible: false,
      goodsFormBtnDisabled: true,
      current_sh: {
        page: 1,
        per_page: 10
      },
      limit_sh: 10,
      totalCount_sh: 1,
      form_sh: {
        uid: null,
        order_sn: "",
        start_time: "",
        end_time: ""
      },
      createTime: [],
      // 验证
      rules,

      // 列表数据
      user_order_list: {
        data: []
      },
      user_order_status: [],
      user_pay_type: [],
      activity_type_list: [],
      listLoading: false,
      dialoglistLoading: false,
      // 图片预览
      srcList: [],
      // 上传图片
      dialogImageUrl: "",
      dialogVisible: false,
      filelist: [],
      // 退货保存列表
      monitorForm: {
        user_return_remark: "",
        form: {
          uid: "", //   用户id
          nickname: "", //  用户名
          related_id: "", //   订单id
          related_order_sn: "", //  订单号
          order_send_time: "", //  订单配送时间
          order_pay_status: "", // 订单支付状态
          is_prior_payment: "", //  订单是否前支付
          salesman_id: "", //   销售员
          salesman_mobile: "", //  销售员手机
          driver_id: "", //   司机
          driver_mobile: "", //  司机手机
          pics: [], //    上传凭证
          return_remark: "菜品变质", // 退货理由
          zid: ""
        },
        return_data: {
          info: {
            order_list: []
          }
        }
      },
      isAutoFillNum: false, //是否自动填充数量
      isEdit: false,
      uid: "",
      selectArr: []
    };
  },
  computed: {
    total() {
      let sz = 0;
      this.monitorForm.return_data.info.order_list.forEach(e => {
        let count = parseFloat(this.$toFixed(parseFloat(e.apply_money)));
        sz += count;
      });
      return sz ? this.$toFixed(sz) : 0;
    },
  },
  created() {
    // this.check_return_order();
    if (this.$route.params.uid) {
      this.monitorForm.form.uid = this.$route.params.uid;
      this.uid = this.$route.params.uid;
      let scope = {
        row: {}
      };
      scope.row = this.$route.params;
      this.check_return_order(scope, "jump");
    }
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  beforeRouteLeave(to, from, next) {
    if (this.isEdit) {
      setTimeout(() => {
        this.$confirm(
          "您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            // 正常跳转
            next();
          })
          .catch(() => {
            next(false);
          });
      }, 200);
    } else {
      next();
    }
  },
  methods: {
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    autoFillNum() {
      if (!this.isAutoFillNum) {
        this.isAutoFillNum = true;
        this.monitorForm.return_data.info.order_list.map(item => {
          item.apply_num = item.sort_num;
          if (item.apply_num && item.apply_price) {
            item.apply_money = this.$toFixed(
              parseFloat(item.apply_num * item.apply_price)
            );
          }
        });
      } else {
        this.$message.warning("退货数量已经填充");
      }
    },
    // 选择退货订单-搜索
    main_search() {},
    // 上传图片-删除
    handleRemove(file) {
      const i = this.monitorForm.form.pics.findIndex(
        item => item.path == file.path
      );
      this.monitorForm.form.pics.splice(i, 1);
    },
    // 上传图片-查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeAvatarUpload(file) {
      let type = file.type;
      let typeList = ["image/jpeg", "image/jpg", "image/png"];
      let isType = false;
      typeList.forEach(e => {
        if (e == type) {
          isType = true;
          return;
        }
      });
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isType) {
        this.$message.error("请上传正确的图片格式");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isType && isLt2M;
    },

    // 上传图片-成功
    handSuccess(res, file, filelist) {
      this.monitorForm.form.pics.push(res.data.src);
    },
    // 保存
    preservation(type) {
      this.$refs["userListFrom"].validate(valid => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.monitorForm.form));

          if (
            form.return_remark == "4" &&
            !this.monitorForm.user_return_remark
          ) {
            this.$message.warning("退货原因必填");
            return;
          }
          let info = JSON.parse(
            JSON.stringify(this.monitorForm.return_data.info)
          );

          let order_list = JSON.parse(JSON.stringify(info.order_list));
          let newarr = [];
          if (order_list.length.length == 0) {
            this.$message.error("请至少添加一个商品");
            return;
          } else {
            // form
            if (form.return_remark == "4") {
              form.return_remark = this.monitorForm.user_return_remark;
            }
            form.pics = JSON.stringify(form.pics);
            let points = 0;
            // 列表
            order_list.map(e => {
              if (e.activity_type == 4) {
                points++;
              }
              var obj = {
                related_id: e.id,
                uid: e.uid,
                goods_id: e.goods_id,
                goods_spu_id: e.goods_spu_id,
                standard_spu_code: e.standard_spu_code,
                goods_name: e.name,
                spu_name: e.spu_name,
                unit: e.unit,
                send_num: e.sort_num,
                send_price: e.send_price,
                apply_num: e.apply_num,
                apply_price: e.apply_price,
                apply_money: e.apply_money,
                remak: e.apply_remark
              };
              newarr.push(obj);
            });
            if (points > 0) {
              let message = `积分兑换的商品无法退货，请从列表中删除后保存`;
              this.$message.error(message);
              return;
            }
            let data = Object.assign(
              {
                sign: Md5(
                  objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
                )
              },
              apiUrl().name,
              form,
              { list: JSON.stringify(newarr) }
            );

            submit_order(data).then(res => {
              if (res.errcode == 0) {
                this.isEdit = false;
                setTimeout(() => {
                  this.$message.success("创建成功");
                }, 300);
                this.$router.back(-1);
              } else {
                this.$message.error(res.errmsg);
              }
            });
          }
        }
      });
    },
    // 焦点离开分拣数量
    inputBlur(val, index, name) {
      if (
        /^(\d+\.?)?\d{0,2}$/.test(parseFloat(val.target.value)) &&
        val.target.value != ""
      ) {
        this.offset(index, name);
      } else {
        this.$nextTick(() => {
          if (val.target.offsetParent) {
            val.target.offsetParent.querySelector("input").focus();
          }
        });
      }
    },
    offset(index, name) {
      if (index < this.list.length - 1) {
        this.$refs[name + (index += 1)].$el.offsetParent
          .querySelector("input")
          .focus();
      }
    },
    // 重置
    reset() {
      this.$refs["userListFrom1"].resetFields();
      this.createTime = [];
      this.getUserOrder();
    },
    // 分页
    changeLimit(pageSize) {
      this.current_sh.per_page = pageSize;
      this.getUserOrder();
    },
    changePage(page) {
      this.current_sh.page = page;
      this.getUserOrder();
    },
    //获取用户信息
    getUser(data) {
      let uid = data.info.user_id;
      this.form_sh.uid = uid;
      this.getUserOrder();
    },
    // 清除用户的uid
    clearUid() {
      this.form_sh.uid = "";
      this.goodsFormBtnDisabled = true;
    },
    // 获取用户订单
    getUserOrder() {
      this.dialoglistLoading = true;
      this.form_sh.start_time = this.createTime.length
        ? this.createTime[0]
        : "";
      this.form_sh.end_time = this.createTime.length ? this.createTime[1] : "";
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        this.form_sh,
        this.current_sh
      );

      get_order(data).then(res => {
        if (res.errcode == 0) {
          this.user_order_list = res.data.list;
          this.user_order_status = res.data.order_status;
          this.user_pay_type = res.data.pay_type;
          this.activity_type_list = res.data.activity_type_list;
          this.dialoglistLoading = false;
          this.goodsFormBtnDisabled = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 退货按钮
    check_return_order(scope, type = "") {
      this.isEdit = true;
      this.isAutoFillNum = false;
      if (scope.row.return_status == 2) {
        if (type && type == "jump") {
          this.isEdit = false;
        }
        this.$message.error("订单已全部退货，无法再继续退货！");
        return;
      }
      let id = scope.row.id;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id: id }
      );
      check_return_order(data).then(res => {
        if (res.errcode == 0) {
          // let return_remark = this.monitorForm.form.return_remark;
          // let remarks = ["菜品变质", "菜品损坏", "菜品多送", "菜品错送", "4"];
          // let index = remarks.indexOf(return_remark);
          // let flag = 1;
          // // flag  1  配送数量  2 填充0
          // if (index == 0 || index == 1) {
          //   flag = 1;
          // } else if (index == 2 || index == 3 || index == 4) {
          //   flag = 2;
          // } else {
          //   flag = 2;
          // }
          res.data.info.order_list.map(item => {
            // if (flag == 1) {
            //   item.apply_num = item.sort_num;
            // } else if (flag == 2) {
            //   item.apply_num = 0;
            // } else {
            // }
            item.apply_num = "";
            item.apply_price = item.sort_price;
            item.apply_money = 0;
            item.no_return_num = this.$toFixed(
              parseFloat(item.sort_num) - parseFloat(item.return_num)
            );
            if (item.return_status == 2) {
              item.apply_num = 0;
            }
            if (item.apply_num && item.apply_price) {
              item.apply_money = this.$toFixed(
                parseFloat(item.apply_num * item.apply_price)
              );
            }
          });
          this.monitorForm.return_data = res.data;
          let info = res.data.info;

          this.monitorForm.form = {
            uid: info.uid,
            nickname: info.nickname,
            related_id: info.id,
            related_order_sn: info.order_sn,
            order_send_time: info.send_time,
            order_pay_status: info.pay_status,
            is_prior_payment: info.is_prior_payment,
            salesman_id: info.salesman_id,
            salesman_mobile: info.salesman ? info.salesman.mobile : "",
            driver_id: info.driver_id,
            driver_mobile: info.driver ? info.driver.mobile : "",
            pics: [],
            return_remark: "菜品变质",
            zid: info.zid
          };

          this.goodsFormVisible = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 监听输入
    numberChange(val, index) {
      let list = this.monitorForm.return_data.info.order_list;
      if (val <= parseFloat(list[index].sort_num)) {
        list[index].apply_num = parseFloat(val);
      } else {
        list[index].apply_num = parseFloat(list[index].sort_num);
      }
    },
    inputchnage(val, scope, type) {
      let index = scope.$index;
      let list = this.monitorForm.return_data.info.order_list;
      if (type == 1) {
        if (val <= parseFloat(list[index].no_return_num)) {
          list[index].apply_num = parseFloat(val);
        } else {
          list[index].apply_num = parseFloat(list[index].no_return_num);
        }
      }
      if (type == 1 && scope.row.apply_price && val != null && val != "") {
        scope.row.apply_money = this.$toFixed(
          parseFloat(scope.row.apply_price) * parseFloat(scope.row.apply_num)
        );
      } else if (type == 2 && scope.row.apply_num && val != null && val != "") {
        scope.row.apply_money = this.$toFixed(
          parseFloat(scope.row.apply_price) * parseFloat(scope.row.apply_num)
        );
      }
    },
    // 删除
    scdelete(index) {
      this.monitorForm.return_data.info.order_list.splice(index, 1);
    },

    // 选择
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map(item => {
        this.selectArr.push(item.id);
      });
    },
    // 批量删除
    batchDelete() {
      let order_length = this.monitorForm.return_data.info.order_list.length;
      if (order_length > 0 && this.selectArr.length > 0) {
        let arr = this.monitorForm.return_data.info.order_list.filter(e => {
          if (this.selectArr.indexOf(e.id) == -1) {
            return e;
          }
        });
        this.monitorForm.return_data.info.order_list = arr;
        this.selectArr = [];
      } else {
        this.$message.warning("请选择需要删除的商品");
      }
    },
    // 计算每列的和
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        } else if (index === 9) {
          sums[index] = this.total;
        } else {
          sums[index] = "";
        }
      });
      return sums;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainor_form form {
  width: 100%;
}
.mainoe {
  .mainoe_pr {
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    /deep/.el-button--default {
      border-color: $subActive;
      color: $menuText;
      &:hover {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
    .mainoe_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .boxdq {
    align-items: flex;
  }
  .mainoe_td {
    .mainoe_tdl {
      font-size: $font_14;
      color: $colour_18;
      .svg-icon {
        font-size: $font_14;
        vertical-align: -0.15em;
        fill: #c1c1c1;
        overflow: hidden;
      }
    }
    .mainoe_tdr {
      font-size: $font_14;
      color: $colour_orange;
    }
  }
  .mainoe_id {
    p {
      margin-bottom: 2px;
    }
    span {
      color: #c1c1c1;
    }
  }
}
.new_navbar_svg {
  fill: #606266;
  vertical-align: bottom;
}
.main_dialog {
  .mainor_form form {
    width: 100%;
  }
  .main_table {
    /deep/.el-table__body-wrapper {
      overflow-y: auto;
      height: 360px;
    }
    /deep/.el-checkbox {
      margin-bottom: 0;
    }
  }
}
.list_el-form_item {
  position: absolute;
  margin-bottom: 18px !important;
  top: 15px;
  left: 0;
  // transform: translateY(10px);
}
/deep/.el-table__row {
  height: 61px;
}
/deep/ .el-form-item--small .el-form-item__error {
  padding-top: 0px;
}

// 订单状态
.order0 {
  color: #f56c6c;
}
.order1 {
  color: #118ab2;
}
.order2 {
  color: #aacd6e;
}
.order3 {
  color: #073b4c;
}
.order4 {
  color: #cccccc;
}
// 支付状态
.pay_type0 {
  color: #f56c6c;
}
.pay_type1 {
  color: #03a98e;
}
.active4 {
  // 积分
  color: #073b4c;
}

.header_form {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
</style>
